<style lang="scss" scoped>

</style>

<template>
    <div class="infobody">
        <div class="topbar">
            <span class="leftbtn" @click="goback"><Icon type="ios-arrow-back"></Icon></span>
            <span class="centertitle">用户角色设置</span>
            <span class="rightbtn" @click="save">保存</span>    
        </div>  
        <div class="content">
            <p class="form-title">用户角色</p>
            <div class="info">
                <Form :model="userRole" >
                    <FormItem  label="用户" >
                        <Select v-model="userRole.userId" placeholder="请选择" @on-change="userChange">
                            <Option v-for="item in userRoleList" :key="item.userId"  :value="item.userId">{{ item.name }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem  label="角色" >
                        <CheckboxGroup v-model="userRole.roleIdList" >
                            <Checkbox v-for="item in roleList" :key="item.roleId"  :label="item.roleId" >{{item.roleName}}</Checkbox>
                        </CheckboxGroup>
                    </FormItem>    
                </Form>
            </div>
        </div>
    </div>
</template>


<script>
import { sampleData } from "api/index.js";
export default {
    data() {
        return {
            userRole:{
                userId:'',
                roleIdList:[]
            },
            roleList:[],
            userRoleList:[]
        }
    },
    methods: {
        goback(){
            this.$router.go(-1)
        },
        save(){
            let obj=this.userRole;
            sampleData.userRoleUpdate(obj).then(res=>{
                if (res.code == 0 || res.code == 200) {
                    this.$Message.success("保存成功");
                    this.$router.push('/index')
                }else{
                    this.$Message.error(res.msg)
                }               
            }).catch(error=>{
                this.$Message.error(error)
            })
        },
        userChange(userId){
            this.userRoleList.forEach(element => {
                if(element.userId==userId){
                    this.userRole.roleIdList=element.roleIdList
                }
            });
        },
        getUserRole(){
            let obj={}
            sampleData.getUserRole(obj).then(res=>{
                if (res.code == 0 || res.code == 200) {
                    this.userRoleList=res.list;
                }else{
                    this.$Message.error(res.msg)
                }               
            }).catch(error=>{
                this.$Message.error(error)
            })
        },
        getRoleList(){
            let obj={}
            sampleData.getRoleList(obj).then(res=>{
                if (res.code == 0 || res.code == 200) {
                    this.roleList=res.list;
                }else{
                    this.$Message.error(res.msg)
                }               
            }).catch(error=>{
                this.$Message.error(error)
            })
        }        
    },
    mounted() {
        this.getUserRole();
        this.getRoleList();
    },
}
</script>
